<template>
  <div class="all">
    <CreateChatroom ></CreateChatroom>
    <SearchChatroom></SearchChatroom>
    <ChatComponent @close="close"></ChatComponent>
    <FriendCard
      class="FriendCard"
      v-for="(item,index) in publicMessageStore.myChatRoomList"
      :key ='index'
      :imgurl="item.avatar"
      :username="item.chatRoomName"
      @click="toChat(item.chatRoomName,item.id)"
    ></FriendCard>
    <FriendCard
      class="FriendCard"
      :imgurl="createChatRoom.imgurl"
      :username="createChatRoom.username"
      @click="changeCreateChatRoomIsView"
    ></FriendCard>
    <FriendCard
      class="FriendCard"
      :imgurl="searchChatRoom.imgurl"
      :username="searchChatRoom.username"
      @click="changeSearchChatRoomIsView"
    ></FriendCard>
  </div>
</template>
    
  <script setup>
import FriendCard from "@/components/friend/FriendCard.vue";
import CreateChatroom from '@/components/public/CreateChatroom.vue'
import { publicMessage, useUser } from "@/store";
import SearchChatroom from '@/components/public/SearchChatroom.vue'
import ChatComponent from "@/components/chat/ChatComponent.vue";
import api from '@/api/service'
const publicMessageStore = publicMessage();
const userStore = useUser();
const createChatRoom = {
  imgurl: require("../../assets/加号.png"),
  username: "创建聊天室",
}; 
const searchChatRoom = {
  imgurl: require("../../assets/加号.png"),
  username: "寻找聊天室",
}; 

//将创建聊天室窗口打开
const changeCreateChatRoomIsView = ()=>{
    const store = publicMessage();
    store.createChatRoomIsView = true;
};
//将搜索聊天室窗口打开
const changeSearchChatRoomIsView = ()=>{
    const store = publicMessage();
    store.searchChatRoomIsView = true;
};
//打开聊天框
const toChat = (chatRoomName,chatRoomId)=>{
  userStore.chatId = chatRoomId; //获取当前聊天室的Id号
  userStore.chatName = chatRoomName;//获取当前聊天室的名字
  userStore.websocket = api.createWebsocket(); // 建立链接
  return api
    .getChatRoomUserList(userStore.chatId) //获取当前聊天室下的所有用户
    .then(() => {
      api.getPrivateMessage(userStore.chatId).then((resp) => {   //获取聊天记录
        resp.forEach(function (item) {
          // console.log( JSON.parse(item) )
          // 处理每个 item
          return JSON.parse(item);
        });
        userStore.messageList = resp;
        userStore.chatComponentIsView = true; //将聊天窗口打开
      });
    });


};
const close = ()=>{
  userStore.messageList = null;
  userStore.userList = null;
  userStore.websocket.close();
  userStore.websocket = null;
}

</script>
    
  <style scoped>
.all {
  display: flex;
  flex-wrap: wrap;
}
.FriendCard {
  /* background-color: green; */
  transition: transform 0.3s ease;
  cursor: pointer;
}
.FriendCard:hover {
  transform: scale(1.2);
}
</style>
    